<template>
  <div class="Shangc">
    <h2>vuex 状态管理</h2>
    <!-- 第六步，获取store state的数据 -->
    <!-- 第一种获取 store 数据的方法，在 Vue3 中我们不推荐 -->
    <!-- <h3>当前登录的用户是：{{ $store.state.userName }}</h3> -->
    <!-- 第二种获取 store 数据的方法，使用 hook 来直接读取，推荐这种方法 -->
    <h3>当前登录的用户是：{{ store.state.userName }}</h3>
    <hr>
    <button @click="denglv">登录</button>
    <button @click="tuichu">退出</button>

  </div>
</template>

<script setup>
// import { ref } from "vue";
import { useStore } from "vuex";
const store=useStore()
// console.log("通过hook拿到数据store",store.state.useStore)
console.log("通过 hook 拿到的 store 数据",store.state.userName);

// 第七步修改状态
const denglv=()=>store.dispatch("login","体今儿")
const tuichu=()=>store.dispatch("logout")

</script>

<style>

</style>